<!--
 * @Description: 批量审批弹窗
-->
<template>
    <t-modal
        title="批量审批"
        maskClosable
        destroyOnClose
        :width="900"
        :visible="visible"
        :confirmLoading="loading"
        @cancel="() => {this.$emit('cancel')}"
    >
        <template slot="footer">
            <a-button key="back" @click="() => {this.$emit('cancel')}">
            关闭
            </a-button>
        </template>
        <a-row :gutter="10">
            <a-col :md="24" :sm="24">
				<a-card :bordered="false" >
                    <tool-bar
                        @search="$refs.table.refresh(true)"
                        @reset="reset"
                    >
                        <template slot="toolBtn" slot-scope="scope">
                            <a-button :loading="agreeLoading" type="primary" icon="check" @click="approval()" style="margin: 0;">批量同意</a-button>
                            <a-alert message="同一所属流程同一审核节点的数据才能使用批量审批" banner style="width: 45%;margin-left: 10px;"/>
                        </template>
                        <template slot="toolForm">
                            <a-form-item label="所属流程" class="margin-right-sm">
                                <a-input v-model="queryParam.modelName" placeholder="请输入"/>
                            </a-form-item>
                            <a-form-item label="审核环节" class="margin-right-sm">
                                <a-input v-model="queryParam.taskName" placeholder="请输入"/>
                            </a-form-item>
                        </template>
                    </tool-bar>
                    <div class="page-common-sub-box">
                        <DataGrid
                            ref="table"
                            rowKey="taskId"
                            showPagination="auto"
                            :columns="columns"
                            :url="url"
                            :queryParam="queryParam"
                            :scroll="scrollXY"
                            :showRowSelect="true"
                            @onSelectChange="
                                (rowsKey,rows) => {
                                    subSelectChange(rowsKey,rows)
                                }"	
                            >
                        >
                        </DataGrid>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </t-modal>
</template>

<script>
    import {DataGrid} from "@/components";
    import {dataGridMixin} from "@/mixins/dataGridMixin";
    export default {
        mixins: [dataGridMixin],
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: false
            },
        },
        components: {
            DataGrid,
        },
        watch: {
            visible(val) {
                if (!val) {
                    this.selectedRowKeys = {
                        taskId: [],
                        processInstanceId: [],
                        processDefinitionId: [],
                    };
                }
            },
        },
        computed: {
            scrollXY(){
                let subHeight = this.subHeight ? this.subHeight : 500
                let height = subHeight - 40 - 40
                return { y : height, x: true};
            },
        },
        created() {
			this.$nextTick(()=>{
				this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
			})
		},
        data() {
            return {
                columns: [
                    {
                        title: "流程标题",
                        dataIndex: "formName",
                        width: 200,
                        langCode: "workflowTitle"
                    },
                    {
                        title: "所属流程",
                        dataIndex: "modelName",
                        width: 200,
                        langCode: "workflowBelongingTo",
                    },
                    {
                        title: "审核环节",
                        dataIndex: "taskName",
                        width: 200,
                        langCode: "auditPhase",
                    },
                    {
                        title: "发起人",
                        dataIndex: "startUserId",
                        width: 200,
                        align: "center",
                        langCode: "sponsor",
                    },
                    {
                        title: "发起时间",
                        dataIndex: "flowStartTime",
                        width: 200,
                        langCode: "originatingTime",
                    },
                    {
                        title: "接收时间",
                        dataIndex: "startTime",
                        width: 200,
                        langCode: "receivingTime"
                    },
                    {
                        title: "开封时间",
                        dataIndex: "openingTime",
                        width: 200,
                        align: "center",
                        langCode: "OpeningTime"
                    },
                ],
                queryParam: {},
                url: {
                    getPageSet: "/workflow/apiFlowableTask/getBatchToDoTasks",
                },
                selectedRowKeys: {
                    taskId: [],
                    processInstanceId: [],
                    processDefinitionId: [],
                    nodeId: [],
                    modelKey: [],
                    businessUuid: [],
                },
                subHeight: 0,
                agreeLoading: false,
            }
        },
        methods: {
            approval() {
                if (this.selectedRowKeys.taskId.length === 0) return this.$message.warn('请勾选要审批的数据', 1.5);
                this.agreeLoading = true;
                let params = {
                    taskId: this.selectedRowKeys.taskId.join(','),
                    processInstanceId: this.selectedRowKeys.processInstanceId.join(','),
                    processDefinitionId: this.selectedRowKeys.processDefinitionId.join(','),
                }
                this.$post('/workflow/apiFlowableTask/batchApproval', params).then(res => {
                    if (res.statusCode === 200) {
                        this.$message.success(res.message ? res.message : '批量审批成功', 1.5);
                        this.agreeLoading = false;
                        this.reset();
                        this.updateNextForm()
                        this.$emit('approval');
                    } else {
                        this.$message.error(res.message ? res.message : '批量审批失败', 1.5);
                        this.agreeLoading = false;
                    };
                })
            },
            // 审批后更新表单
            updateNextForm() {
                const params = {
                    modelKey: this.selectedRowKeys.modelKey.join(','),
                    taskNodeId: this.selectedRowKeys.nodeId.join(','),
                    businessUuid: this.selectedRowKeys.businessUuid.join(','),
                    processDefinitionId: this.selectedRowKeys.processDefinitionId.join(','),
                    outcome: "同意",
                }
                this.$post("/workflow/apiFlowableTask/updateNextForm", params).then(res => {})
            },
            subSelectChange(key,data) {
                this.selectedRowKeys = {
                    taskId: [],
                    processInstanceId: [],
                    processDefinitionId: [],
                    nodeId: [],
                    modelKey: [],
                    businessUuid: [],
                }
                this.selectedRowKeys.taskId = key;
                data.forEach(item => {
                    this.selectedRowKeys.processInstanceId.push(item.processInstanceId);
                    this.selectedRowKeys.processDefinitionId.push(item.processDefinitionId);
                    this.selectedRowKeys.nodeId.push(item.nodeId);
                    this.selectedRowKeys.modelKey.push(item.modelKey);
                    this.selectedRowKeys.businessUuid.push(item.businessKey);
                })
            },
            reset() {
                this.queryParam = {};
                this.$refs.table.refresh(true);
            }
        },
    }
</script>

<style lang="less" scoped>
    /deep/.ant-table {
        user-select: text;
    }
    /deep/.ant-modal-body {
        padding-top: 0px !important;
    }
    /deep/.page-common-sub-box {
        height: 450px !important;
    }
    /deep/.page-common-sub-box .table-wrapper {
        height: calc(100% - -2px);
    }
    /deep/.table-operator {
        display: flex;
        align-items: center;
        margin-top: -10px;
        padding: 5px 0 5px 0;
    }
</style>